/* eslint-disable react/jsx-indent */
import React, { Component } from 'react';
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Table, Button, Modal, Spin } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import Link from 'umi/link';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Description } = DescriptionList;
@connect(({ addempsend, loading }) => ({
  addempsend,
  proBaseList: addempsend.proBaseList,
  detailsData: addempsend.detailsData,
  proFbList: addempsend.proFbList,
  loading: loading.models.addempsend,
  payDetailsData: addempsend.payDetailsData,
}))
@Form.create()
class Problem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      down: 'down',
      maistrue: false,
      loading: false,
    };
  }

  componentDidMount() {
    this.getDetail();
  }

  // 详情
  getDetail = () => {
    this.setState({
      loading: true,
    });
    const { dispatch, location } = this.props;
    const { sendOrdAddTaskId } = location.query;
    dispatch({
      type: 'addempsend/feactorderDetail',
      payload: { sendOrdAddTaskId },
      callback: response => {
        if (response.success) {
          this.setState({
            loading: false,
          });
        } else {
          this.setState({
            loading: false,
          });
        }
      },
    });
  };

  // 缴纳明细弹框
  detailed = () => {
    const { dispatch, location } = this.props;
    const { sendOrdAddTaskId } = location.query;
    dispatch({
      type: 'addempsend/getPaymentDetails',
      payload: { sendOrdAddTaskId },
    });

    this.setState({
      maistrue: true,
    });
  };

  // 关闭缴纳明细弹框
  handleOk = () => {
    this.setState({
      maistrue: false,
    });
  };

  render() {
    const { detailsData, payDetailsData } = this.props;
    const { loading, lcontRecDto, allData, lokbegin, down, maistrue } = this.state;
    const newProtInfoDto = [];
    if (detailsData.protInfoDto) {
      newProtInfoDto.push(detailsData.protInfoDto);
    }

    const columns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始年月',
        dataIndex: 'beginDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '回单时间',
        dataIndex: 'receTime',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: receTime => (receTime ? moment(receTime).format('YYYY-MM-DD') : '无'),
      },

      {
        title: '修改说明',
        dataIndex: 'editDesc',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    const insAccuColumns = [
      {
        title: '产品名称',
        dataIndex: 'assName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '业务开始年月',
        dataIndex: 'beginDate',
        align: 'center',
        // sorter: (a, b) => new Date(b.beginDate) - new Date(a.beginDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        // render: beginDate => (beginDate ? moment(beginDate).format('YYYY-MM') : '无'),
        render: val => val && `${val.toString().substr(0, 4)}-${val.toString().substr(4, 5)}`,
      },
      {
        title: '业务结束年月',
        dataIndex: 'endDate',
        align: 'center',
        sorter: (a, b) => new Date(b.endDate) - new Date(a.endDate),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: endDate => (endDate ? moment(endDate).format('YYYY-MM') : '无'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmount',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业比例(%)',
        dataIndex: 'entpProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人比例(%)',
        dataIndex: 'perProp',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'right' } }),
      },
      {
        title: '执行地区',
        dataIndex: 'cityName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    const columnsAgreement = [
      {
        title: '协议名称',
        dataIndex: 'suppProtName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单方',
        dataIndex: 'sendSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '服务产品',
        dataIndex: 'pdName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '价格',
        dataIndex: 'price',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];

    const insAccuColumnsthree = [
      {
        title: '险种',
        width: 300,
        dataIndex: 'assName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '缴费方式',
        width: 300,
        dataIndex: 'payFlag',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '缴费账户',
        width: 700,
        dataIndex: 'accoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '申报工资',
        width: 300,
        dataIndex: 'decWage',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },

      {
        title: '政策组合',
        dataIndex: 'grpName',
        width: 300,
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      // {
      //   title: '缴费人员类别',
      //   dataIndex: 'insIde',
      //   width: 300,
      //   onHeaderCell: () => {
      //     return { style: { fontWeight: 'bold' } };
      //   },
      //   render: insIde => (insIde ? insIde : '--'),
      // },
    ];
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card
            //   title="派单信息"
            title={<span style={{ fontWeight: 900 }}>派单信息</span>}
            style={{
              border: '0px',
              marginBottom: 24,
              fontSize: 16,
              color: '#262626',
            }}
          >
            <Form>
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="客户名称">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.custName
                    : '--'}
                </Description>
                <Description term="商务合同">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.custContName
                    : '--'}
                </Description>
                <Description term="入职日期">
                  {detailsData.responseSendOrdDetailDto
                    ? moment(detailsData.responseSendOrdDetailDto.entryDate).format('YYYY-MM-DD')
                    : '--'}
                </Description>
              </DescriptionList>
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="是否入职联系">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.conEmpFlagName
                    : '--'}
                </Description>
                <Description term="业务部">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.sendDepName
                    : '--'}
                </Description>
                <Description term="业务员">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.sendRespName
                    : '--'}
                </Description>
              </DescriptionList>
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="接单方">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.recvSuppName
                    : '--'}
                </Description>
                <Description term="发单时间">
                  {detailsData.responseSendOrdDetailDto
                    ? moment(detailsData.responseSendOrdDetailDto.sendDate).format('YYYY-MM-DD')
                    : '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card
            //   title="员工联系"
            title={<span style={{ fontWeight: 900 }}>员工信息</span>}
            style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
          >
            <Form>
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="姓名">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.empName
                    : '--'}
                </Description>
                <Description term="证件类型">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.idTypeName
                    : '--'}
                </Description>
                <Description term="证件号">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.idCode
                    : '--'}
                </Description>
              </DescriptionList>
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="国籍">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.nationName
                    : '--'}
                </Description>
                <Description term="出生日期">
                  {detailsData.responseSendOrdDetailDto
                    ? moment(detailsData.responseSendOrdDetailDto.birthDate).format('YYYY-MM-DD')
                    : '--'}
                </Description>
                <Description term="性别">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.genderName
                    : '--'}
                </Description>
              </DescriptionList>
              <DescriptionList style={{ marginBottom: 24 }}>
                <Description term="电话">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.mobile
                    : '--'}
                </Description>
                <Description term="邮箱">
                  {detailsData.responseSendOrdDetailDto
                    ? detailsData.responseSendOrdDetailDto.email
                    : '--'}
                </Description>
              </DescriptionList>
            </Form>
          </Card>
          <Card
            //   title="产品服务信息"
            title={<span style={{ fontWeight: 900 }}>产品服务信息</span>}
            style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
          >
            <Table columns={columns} dataSource={detailsData.pdInfoDtos} pagination={false} />
          </Card>
          <Card
            //   title="协议信息"
            title={<span style={{ fontWeight: 900 }}>协议信息</span>}
            style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
          >
            <Table columns={columnsAgreement} dataSource={newProtInfoDto} pagination={false} />
          </Card>
          {/* <Card
          //   title="社保公积金信息"position: absolute;position: relative;
          title={
            <div style={{ position: 'relative' }}>
              <span style={{ fontWeight: 900 }}>社保公积金信息</span>
              <a style={{ position: 'absolute', top: '0', right: '0' }}>缴纳明细</a>
            </div>
          }
          style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
        >
          <Form>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="社保申报工资">{proBaseList.empName}</Description>
              <Description term="社保缴费方式">
                {proBaseList.phone ? proBaseList.phone : '--'}
              </Description>
              <Description term="社保账户">{proBaseList.custName}</Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="社保组合">{proBaseList.creName}</Description>
              <Description term="缴费人员类别">
                {moment(proBaseList.creTime).format('YYYY-MM-DD')}
              </Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="公积金申报工资">{proBaseList.probTypeIdName}</Description>
              <Description term="公积金缴费方式">
                {proBaseList.probObj ? proBaseList.probObj : '--'}
              </Description>
              <Description term="公积金账户">{proBaseList.probTypeDesc}</Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="公积金组合">{proBaseList.probTypeIdName}</Description>
            </DescriptionList>
          </Form>
        </Card> */}

          <Card
            title={
              <div style={{ position: 'relative' }}>
                <span style={{ fontWeight: 900 }}>社保公积金信息</span>
                <a
                  onClick={() => this.detailed()}
                  style={{ position: 'absolute', top: '0', right: '0' }}
                >
                  缴纳明细
                </a>
              </div>
            }
            style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
          >
            {detailsData.addEmpDetSerDto && Number(detailsData.addEmpDetSerDto.insSetFlag) === 2 ? (
              <div>
                <Table
                  dataSource={detailsData.addEmpDetSerDto.detailSerDtos}
                  columns={insAccuColumnsthree}
                  // rowKey={record => record.serSetId}
                  // loading={loading}
                  pagination={false}
                  style={{ width: 700, marginTop: '15px' }}
                />
              </div>
            ) : (
              <Form>
                <DescriptionList style={{ marginBottom: 24 }}>
                  <Description term="社保申报工资">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.insDecWage
                      : '--'}
                  </Description>
                  <Description term="社保缴费方式">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.insPayFlag
                      : '--'}
                  </Description>
                  <Description term="社保账户">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.insAccoName
                      : '--'}
                  </Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 24 }}>
                  <Description term="社保组合">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.insGrpName
                      : '--'}
                  </Description>
                  <Description term="缴费人员类别">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.insIde
                      : '--'}
                  </Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 24 }}>
                  <Description term="公积金申报工资">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.accuDecWage
                      : '--'}
                  </Description>
                  <Description term="公积金缴费方式">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.accuPayFlag
                      : '--'}
                  </Description>
                  <Description term="公积金账户">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.accuAccoName
                      : '--'}
                  </Description>
                </DescriptionList>
                <DescriptionList style={{ marginBottom: 24 }}>
                  <Description term="公积金组合">
                    {detailsData.addEmpDetSerDto && detailsData.addEmpDetSerDto.basicSerDto
                      ? detailsData.addEmpDetSerDto.basicSerDto.accuGrpName
                      : '--'}
                  </Description>
                </DescriptionList>
              </Form>
            )}
          </Card>

          {/* <Card
          title={
            <div style={{ position: 'relative' }}>
              <span style={{ fontWeight: 900 }}>执行状态</span>
            </div>
          }
          style={{ border: '0px', marginBottom: 24, fontSize: 16, color: '#262626' }}
        >
          <Form>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="社保申报工资">{proBaseList.empName}</Description>
              <Description term="社保缴费方式">
                {proBaseList.phone ? proBaseList.phone : '--'}
              </Description>
              <Description term="社保账户">{proBaseList.custName}</Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="社保组合">{proBaseList.creName}</Description>
              <Description term="缴费人员类别">
                {moment(proBaseList.creTime).format('YYYY-MM-DD')}
              </Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="公积金申报工资">{proBaseList.probTypeIdName}</Description>
              <Description term="公积金缴费方式">
                {proBaseList.probObj ? proBaseList.probObj : '--'}
              </Description>
              <Description term="公积金账户">{proBaseList.probTypeDesc}</Description>
            </DescriptionList>
            <DescriptionList style={{ marginBottom: 24 }}>
              <Description term="公积金组合">{proBaseList.probTypeIdName}</Description>
            </DescriptionList>
          </Form>
        </Card> */}

          <Card
            title={
              <span style={{ fontWeight: 'bolder' }} id="contactrecord">
                联系记录
              </span>
            }
            style={{ position: 'relative', margin: '0 0 20px 0', padding: '0 0 20px 0' }}
            bordered={false}
          >
            {detailsData.contRecDtoList ? (
              <div>
                {Boolean(allData) === false ? (
                  <div>
                    {lcontRecDto && detailsData.contRecDtoList.length > 2 ? (
                      <div>
                        {detailsData.contRecDtoList
                          ? detailsData.contRecDtoList.map(item => (
                              <div>
                                <DescriptionList style={{ marginBottom: '20px' }}>
                                  <Description term="联系方式">
                                    {item.contactInfo || '--'}
                                  </Description>
                                  {String(item.contactInfo) === '短信' ||
                                  String(item.contactInfo) === '电话' ? (
                                    <Description term="联系电话">
                                      {item.contactMobile || '--'}
                                    </Description>
                                  ) : (
                                    <Description term="邮件">{item.email || '--'}</Description>
                                  )}
                                  <Description term="联系人">{item.contactPer || '--'}</Description>
                                  <Description term="联系时间">
                                    {item.contactTime || '--'}
                                  </Description>
                                  <Description term="备注">{item.remark || '--'}</Description>
                                </DescriptionList>
                                <div
                                  style={{
                                    borderBottom: '1px dashed #ccc',
                                    marginBottom: '20px',
                                  }}
                                />
                              </div>
                            ))
                          : null}
                      </div>
                    ) : (
                      <div>
                        {detailsData.contRecDtoList
                          ? detailsData.contRecDtoList.map(item => (
                              <div>
                                <DescriptionList style={{ marginBottom: '20px' }}>
                                  <Description term="联系方式">
                                    {item.contactInfo || '--'}
                                  </Description>
                                  {String(item.contactInfo) === '短信' ||
                                  String(item.contactInfo) === '电话' ? (
                                    <Description term="联系电话">{item.contactMobile}</Description>
                                  ) : (
                                    <Description term="邮件">{item.email || '--'}</Description>
                                  )}
                                  <Description term="联系人">{item.contactPer || '--'}</Description>
                                  <Description term="联系时间">
                                    {item.contactTime || '--'}
                                  </Description>
                                  <Description term="备注">{item.remark || '--'}</Description>
                                </DescriptionList>
                                <div
                                  style={{
                                    borderBottom: '1px dashed #ccc',
                                    marginBottom: '20px',
                                  }}
                                />
                              </div>
                            ))
                          : null}
                      </div>
                    )}
                  </div>
                ) : (
                  <div>
                    {detailsData.contRecDtoList.map(item => (
                      <div>
                        <DescriptionList style={{ marginBottom: '20px' }}>
                          <Description term="联系方式">{item.contactInfo || '--'}</Description>
                          {String(item.contactInfo) === '短信' ||
                          String(item.contactInfo) === '电话' ? (
                            <Description term="联系电话">{item.contactMobile || '--'}</Description>
                          ) : (
                            <Description term="邮件">{item.email || '--'}</Description>
                          )}
                          <Description term="联系人">{item.contactPer || '--'}</Description>
                          <Description term="联系时间">{item.contactTime || '--'}</Description>
                          <Description term="备注">{item.remark || '--'}</Description>
                        </DescriptionList>
                        <div style={{ borderBottom: '1px dashed #ccc', marginBottom: '20px' }} />
                      </div>
                    ))}
                  </div>
                )}
                {detailsData.contRecDtoList && detailsData.contRecDtoList.length > 2 ? (
                  <a
                    style={{
                      position: 'absolute',
                      right: '50%',
                      bottom: 0,
                      zIndex: 99,
                      padding: '10px 0 20px 0',
                    }}
                    onClick={e => this.viewMore(e)}
                  >
                    {lokbegin}

                    <LegacyIcon type={down} />
                  </a>
                ) : null}
              </div>
            ) : null}
          </Card>

          <Modal
            width="1200px"
            visible={maistrue}
            onCancel={this.handleOk}
            title="社保公积金明细"
            footer={[
              <Button key="submit" type="primary" onClick={this.handleOk}>
                关闭
              </Button>,
            ]}
          >
            <Card>
              <Table
                // scroll={scroll}
                dataSource={payDetailsData}
                columns={insAccuColumns}
                rowKey={record => record.serSetId}
                // loading={loading}
                pagination={false}
                // pagination={moreFlagList[parseInt(activeKey) - 1] == '2' ? false : pagination}
              />
            </Card>
          </Modal>
          <FooterToolbar style={{ width: '100%' }}>
            <Link to="/sendordermanage/addemployee/index">
              <Button style={{ marginRight: 10 }}>关闭</Button>
            </Link>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Problem;
